<template>
  <div class="add">
    <CustomEchart type="pie" width="50%" height="50%" :option="pieOption"></CustomEchart>
    <CustomEchart type="line" width="50%" height="50%" :option="option"></CustomEchart>
    <CustomEchart type="bar" width="50%" height="50%" :option="option2"></CustomEchart>
    <CustomEchart width="50%" height="50%" :option="option"></CustomEchart>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, onMounted, computed, watch, onBeforeUnmount } from 'vue'
const props = defineProps({})
const option = ref({})
const option2 = ref({})
const pieOption = ref({})
onMounted(() => {
  console.log('收押人员')
  setTimeout(() => {
    option.value = {
      xAxis: {
        data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
      },

      series: [
        {
          name: '历史访问',
          data: [850, 2030, 1224, 1218, 535, 847, 660],
          type: 'line'
        }
        // {
        //   name: '今日访问量',
        //   data: [150, 230, 224, 218, 135, 147, 260],
        //   type: 'bar'
        // }
      ]
    }
    option2.value = {
      // color: ['pink', 'blue'],
      xAxis: {
        data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
      },

      series: [
        {
          name: '历史访问',
          data: [850, 2030, 1224, 1218, 535, 847, 660],
          type: 'line'
        },
        {
          name: '今日访问量',
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'bar'
        }
      ]
    }
    pieOption.value = {
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          center: ['20%', '50%'],
          // label: {
          //   position: 'inner',
          //   formatter: '{b}\n {c}',
          //   textStyle: {
          //     color: '#fff',
          //     fontSize: '14rem'
          //   }
          // },

          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
  }, 1000)
})
</script>
<style lang="scss" scoped>
.add {
  padding: 20px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}
</style>
